import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div className="space-y-4">
      <section className="rounded-2xl bg-gradient-to-br from-brand-500 to-brand-600 text-white p-5 shadow">
        <div className="text-sm opacity-90">贴心守护您的健康</div>
        <div className="mt-1 text-2xl font-semibold">预约挂号 · 在线问诊</div>
        <div className="mt-3 grid grid-cols-3 gap-3 text-center">
          <Quick to="/appointment" label="预约挂号" icon="📅" />
          <Quick to="/consultation" label="图文问诊" icon="💬" />
          <Quick to="/symptoms" label="自查分诊" icon="🩺" />
        </div>
      </section>

      <section className="grid grid-cols-2 gap-3">
        <Card title="用药方案" desc="基于病情给出建议" to="/plans" />
        <Card title="我的报告" desc="上传体检与化验" to="/symptoms" />
        <Card title="医护工作台" desc="医生/护士入口" to="/provider" />
        <Card title="AI 问答" desc="DeepSeek 智能助手" to="/ai" />
      </section>

      <section className="rounded-2xl bg-white p-4 shadow-sm">
        <h3 className="font-medium">热门科室</h3>
        <div className="mt-3 grid grid-cols-4 gap-2 text-sm">
          {['内科', '外科', '儿科', '妇产科', '皮肤科', '骨科', '眼科', '口腔科'].map(d => (
            <span key={d} className="rounded-lg border px-3 py-2 text-gray-700 text-center bg-gray-50">
              {d}
            </span>
          ))}
        </div>
      </section>
    </div>
  );
}

function Quick({ to, label, icon }: { to: string; label: string; icon: string }) {
  return (
    <Link to={to} className="rounded-xl bg-white/15 backdrop-blur py-3 text-white">
      <div className="text-2xl">{icon}</div>
      <div className="mt-1 text-sm">{label}</div>
    </Link>
  );
}

function Card({ title, desc, to }: { title: string; desc: string; to: string }) {
  return (
    <Link to={to} className="rounded-2xl bg-white p-4 shadow-sm hover:shadow-md transition">
      <div className="text-base font-medium text-gray-900">{title}</div>
      <div className="mt-1 text-sm text-gray-500">{desc}</div>
    </Link>
  );
}


